import React, { createContext } from 'react'
const { Provider, Consumer } = createContext()
class Son extends React.Component {
    render() {
        return (
            <div>
                <Sun />
            </div>
        )
    }
}
function Sun() {
    return (
        <div>
            <Consumer> 
                {value => <span>{value}</span>} 
            </Consumer> 
            1
        </div>
    )
}
export class Test10 extends React.Component {
    state = {
        msg: '跨组件',
        msg2:'msg2'
    }
    change = (value) => {
        this.setState({
            msg: value
        })
    }
    render() {
        return (
            <Provider value={this.state.msg} msg={this.state.msg2}>
                <div className="area">
                    <h1>10.组件通信-跨组件</h1>
                    <Son />
                </div>
            </Provider>

        )
    }
}